// {
//   // 标签名
//   tagName: 'div',
//   // 属性
//   properties: {
//       // 样式
//       style: {},
//   },
//   // 子节点
//   children: [],
//   // 唯一标识
//   key: 1,
// }
// 1.根据 tagName 使用 document.createElement创建元素

// 2.根据 props 使用 setAttribute给元素设置属性

// 3.根据 innerHtml 使用 document.createTextNode 渲染文本节点

// 4.根据是否有 children (子元素) 去递归渲染

// 5.最后使用appendChild将创建的元素插入到页面中
class Element {
  constructor(tagName, ...args) {
    this.tagName = tagName;
    // 判断下面还有没有子元素
    if(Array.isArray(args[0])) {
      this.props = {};
      this.children = args[0];
    } else {
      this.props = args[0];
      this.children = args[1];
    }
  }
  render() {
    // 创建一个元素
    const $dom = document.createElement(this.tagName);
    debugger
    // 给元素加上所有的属性
    for(const proKey in this.props) {
      $dom.setAttribute(proKey, this.props[proKey]);
    }
    // 如果存在子节点
    if(this.children) {
      this.children.forEach(child => {
        // 如果子元素还包含子元素,则递归
        if(child instanceof Element) {
          $dom.appendChild(child.render());
        } else {
          $dom.appendChild(document.createTextNode(child))
        }
      });
    }
    return $dom;
  }
}
// export default Element;
// const tree = new Element('div', {classname: 'div'}, [
//   new Element('h1', {style: 'color: red;'},['Hello, This is my Vdom library']),
//   new Element('ul', [
//     new Element('li', ['1111']),
//     new Element('li', ['2222']),
//   ])
// ]);
// const $dom = tree.render();
// console.log(111, $dom);

// 比较新旧 DOM树的差异
patch.NODE_DELETE = 'NODE_DELETE'; // 节点被删除
patch.NODE_TEXT_MODIFY = 'NODE_TEXT_MODIFY'; // 文本节点被更改
patch.NODE_REPLACE = 'NODE_REPLACE'; // 节点被替代
patch.NODE_ADD = 'NODE_ADD'; // 添加节点
patch.NODE_ATTRIBUTE_MODIFY = 'NODE_ATTRIBUTE_MODIFY'; // 更新属性
patch.NODE_ATTRIBUTE_ADD = 'NODE_ATTRIBUTE_ADD'; // 添加属性
patch.NODE_ATTRIBUTE_DELETE = 'NODE_ATTRIBUTE_DELETE'; // 删除属性
